// 第一步导入three.js
import * as THREE from 'three'; // 导入three.js

import '../../../css/base.css'
(function main() {
  // 第三步创建一个加载器
  let canvas = document.getElementById('canvas');
  // let renderer = new THREE.WebGLRenderer({canvas}); // 原来的代码以下是修改后的代码
  let renderer = new THREE.WebGLRenderer({antialias: true, canvas}); // 模型放大后可以看到有锯齿添加这个属性antialias: true,可以抗锯齿

  // 第四步创建一个相机
  let fov = 75, aspect = 2, near = 0.1, far = 5;
  let camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.z = 2
  // 第五步创建一个场景
  let scene = new THREE.Scene();

  // 添加一个光源
  let light = new THREE.DirectionalLight(0xFFFFFF, 1);
  light.position.set(-1, 2, 4);
  scene.add(light);

  // 创建一个模型
  let width = 1, height = 1, depth = 1;
  let geometry = new THREE.BoxGeometry(width, height, depth);

  // let material = new THREE.MeshBasicMaterial({color: 0xFF0000}); // 不受光照影响的材质
  // let material = new THREE.MeshLambertMaterial({color: 0xFF0000}); // 受光照影响的材质---不加光看不见
  let material = new THREE.MeshPhongMaterial({color: 0xFF0000}); // 受光照影响的材质---不加光看不见

  let mesh = new THREE.Mesh(geometry, material);
  mesh.position.setX(0)
  let mesh2 = new THREE.Mesh(geometry, material);
  mesh2.position.setX(-2)
  let mesh3 = new THREE.Mesh(geometry, material);
  mesh3.position.setX(2)

  // 将模型添加到场景中
  scene.add(mesh)
  scene.add(mesh2)
  scene.add(mesh3)

  // 最后一步渲染
  function render() {
    // 让场景动起来
    mesh.rotateY(0.01)
    mesh.rotateZ(0.01)
    mesh2.rotateY(0.02)
    mesh2.rotateZ(0.02)
    mesh3.rotateY(0.03)
    mesh3.rotateZ(0.03)
    requestAnimationFrame(render)

    // renderer.render(scene, camera) // 原来的代码以下是修改后的代码

    // // 响应式three.js 防止three.js窗口大小改变导致模型变形
    // camera.aspect = canvas.clientWidth / canvas.clientHeight;
    // camera.updateProjectionMatrix();

    // 优化
    if (resizeRendererToDisplaySize()) {
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }
    renderer.render(scene, camera)
  }

  render()

  // 以下是优化后的代码
  function resizeRendererToDisplaySize() {
    let pixelRatio = window.devicePixelRatio;
    // let width = canvas.clientWidth;
    // let height = canvas.clientHeight;
    let width = canvas.clientWidth * pixelRatio | 0;
    let height = canvas.clientHeight * pixelRatio | 0;
    let needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }

  // // 优化方案2 扩展
  // window.addEventListener('resize', reSize, false)
  // function reSize(){
  //     let width = canvas.clientWidth;
  //     let height = canvas.clientHeight;
  //     camera.aspect = canvas.clientWidth / canvas.clientHeight;
  //     camera.updateProjectionMatrix();
  //     renderer.setPixelRatio(window.devicePixelRatio);
  //     renderer.setSize(width, height, false);
  // }


})()
